<template>
      <!--header-->
      <header>
        <div @click="changepage()"><i class="iconfont icon-cuowu"></i></div>
        <div class="dian"><i class="iconfont icon-aixin"></i></div>
        <div><i class="iconfont icon-fenxiang"></i></div>
        <div class="fu"></div>
      </header>
</template>
<script type="text/ecmascript-6">
    export default {
      mounted:function(){
        $(".dian").toggle(function(){
          $(".icon-aixin").css({"color":"#ed145b"});
          $(".fu").html("收藏成功").fadeIn("slow");
          $(".fu").delay(1000).fadeOut("slow");
        },function(){
          $(".icon-aixin").css({"color":"white"});
          $(".fu").html("取消收藏").fadeIn("slow");
          $(".fu").delay(1000).fadeOut("slow");
        });
      },
      methods:{
        changepage:function(){
          this.$router.go(-1)
        }
      }
    }
</script>
<style scoped lang="scss">
    header{
      padding:0.1rem;
      background: black;
    }
    header div{
      float: left;
      color: white;
    }
    header .iconfont{
      display: block;
      font-size:24px;
      font-weight:bold;
    }
    header div:nth-child(2){
      margin-left: 70%;
    }
    header div:nth-child(3){
      margin-left:10%;
      margin-top:-2px;
    }
    header .icon-cuowu{
      font-size:18px;
    }
    .fu{
      height: 0.3rem;
      position: fixed;
      background: gray;
      opacity: .8;
      font-weight: bold;
      text-align: center;
      line-height: 0.3rem;
      border-radius: 10%;
      padding: 0 0.1rem;
      z-index: 1000;
      left: 37%;
      top: 50%;
      font-size: 14px;
      display:none;
    }
  .red{
    color:red;
  }
</style>
